import request from '../../api/http';
import storage from 'js-storage';

export default {
  data() {
    return {
      loading: false,
      getTableLoading: false,
      tableData: {},
      stepIndex: 0,
      timer: null,
      taskId: '',
      workStep: {
        processNo: '',
        processName: '',
        stepNo: '',
        stepName: '',
        stationName: '',
        stationNo: '',
        fixedHours: '',
        isCheck: true,
        instruction_video: '',
      },
    };
  },
  watch: {
    stepIndex() {
      this.workStep = this.tableData.workStepList[this.stepIndex];
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
  },
  beforeDestroy() {
    this.clearTimer();
  },
  created() {
    this.taskId = this.$route.query.taskId;
    this.getStepIndex();
    this.timer = setInterval(() => {
      this.getStepIndex();
      this.getWindowClose();
    }, 500);
  },
  methods: {
    // 获取最新的步骤
    getStepIndex() {
      const stepIndex = storage.localStorage.get('stepIndex');
      if (stepIndex !== this.stepIndex) {
        this.stepIndex = stepIndex;
      }
    },
    // 实时监听页面关闭
    getWindowClose() {
      const isClose = storage.localStorage.get('isClose');
      if (isClose) {
        window.close();
      }
    },
    // 清除计时器
    clearTimer() {
      clearInterval(this.timer);
    },
    getData() {
      this.getTableLoading = true;
      return request.get(`/output/api/info/${this.taskId}`).then(res => {
        this.tableData = res.data.data;
        this.workStep = this.tableData.workStepList[this.stepIndex];
        this.getTableLoading = false;
        return res.data.data;
      });
    },
  },
};
